<template>
  <span
    :style="{
      fontSize: fontSize + 'px',
      backgroundImage: isImage ? `url(${bgImage})` : ''
    }"
    :class="[isImage ? 'title-after' : 'title-text-after']"
    class="title-text"
  >
    {{ text }}
  </span>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: () => '标题'
    },
    fontSize: {
      type: Number,
      default: () => 18
    },

    bgImage: {
      type: String,
      default: () => ''
    }
  },
  computed: {
    isImage() {
      return !!this.bgImage
    }
  }
}
</script>

<style lang="scss" scoped>
.title-text {
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #1d2129;
}
.title-text-after {
  position: relative;
  padding-left: 20px;
  display: flex;
  align-items: center;
  &::after {
    content: '';
    display: block;
    width: 5px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #3f8cff;
  }
}
.title-after {
  position: relative;
  padding-left: 46px;
  background-position: left;
  background-repeat: no-repeat;
  background-position-x: 0;
}
</style>
